import React, { FC, useRef, useState } from "react";
import { Form, Button } from "antd";
import { ProFormInstance, resetComponent } from "@ant-design/pro-components";
import {
    LoginForm,
    ProFormCaptcha,
    ProFormCheckbox,
    ProFormText,
} from '@ant-design/pro-components';

import {
    AlipayCircleOutlined,
    LockOutlined,
    MobileOutlined,
    TaobaoCircleOutlined,
    UserOutlined,
    WeiboCircleOutlined,
} from '@ant-design/icons';
import { reg } from '@/utils/validate'
import { Ajax } from "@/api/api";
import { history } from "umi";
import { ShowError } from "@/utils/message";
const FindPass: FC<any> = () => {
    const [form] = Form.useForm()
    const formRef = useRef<ProFormInstance<any>>()
    const [disabled, setDisabled] = useState<boolean>(false)
    const src = 'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4'
    const todoSubmit = () => {
        form.validateFields()
            .then(async (value: any) => {
                let res: any = await Ajax.verifyCaptcha({
                    phone: value.phone,
                    captcha: value.captcha
                })

                if (res.code == 200) {
                    let res2: any = await Ajax.changepass({
                        password: value.password,
                        phone: value.phone,
                    })
                    if (res.code == 200) {
                        history.push('/login')
                    }
                }
            })
            .catch(err => {
                ShowError('校验失败')
            })
    }
    return (
        <div className='lgbox'>
            <video
                className='myvideo'
                muted
                loop
                autoPlay
                src={src}
            ></video>


            <div className='login-box'>
                <h2 className="title">找回密码</h2>
                <div className="box">
                    <LoginForm
                        form={form}
                        formRef={formRef}
                        submitter={{
                            render: (props, doms) => {
                                return [
                                    <div style={{ width: '100%', display: 'flex' }}>
                                        <Button style={{ flex: 1, margin: '0 5px' }} onClick={todoSubmit} type="primary" key="submit" >
                                            修改密码
                                        </Button>,
                                        {<Button style={{ flex: 1, margin: '0 5px' }} danger key="reset" onClick={() => form.resetFields()}>
                                            重置
                                        </Button>}
                                    </div>
                                ];
                            },
                        }}
                    >
                        <ProFormText
                            fieldProps={{
                                size: 'large',
                                prefix: <MobileOutlined className={'prefixIcon'} />,
                            }}
                            label="手机号"
                            name="phone"
                            placeholder={'手机号'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入手机号！',
                                },
                                { pattern: reg.phone, message: '请输入格式正确的手机号' },
                            ]}
                            onChange={(v: any) => setDisabled(reg.phone.test(v.target.value))}
                        />
                        <ProFormCaptcha
                            label="验证码"
                            countDown={180}
                            fieldProps={{
                                size: 'large',
                                prefix: <LockOutlined className={'prefixIcon'} />,
                            }}
                            captchaProps={{
                                size: 'large',
                                disabled: !disabled,
                                type: 'primary'
                            }}
                            phoneName="phone"
                            placeholder={'验证码'}
                            captchaTextRender={(timing, count) => {
                                if (timing) {
                                    setDisabled(false)
                                    return `${count} ${'S倒计时'}`;
                                }
                                return '获取验证码';
                            }}
                            name="captcha"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入验证码！',
                                },
                                { pattern: reg.code, message: '请输入4位的数字验证码' }
                            ]}
                            onGetCaptcha={async (phone) => {
                                let res: any = await Ajax.sendCaptcha({
                                    phone
                                })
                            }}
                        />
                        <ProFormText.Password
                            label="新密码"
                            name="password"
                            fieldProps={{
                                size: 'large',
                                prefix: <LockOutlined className={'prefixIcon'} />,
                            }}
                            placeholder={'新密码'}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码！',
                                },
                                {
                                    pattern: reg.pwd,
                                    message: '请输入6-16位的数字字母密码组合'
                                }
                            ]}
                        />
                    </LoginForm>
                </div>
            </div>
        </div>
    )
}

export default FindPass